<template>
	<view>
		<view class="btns" v-if="status == 'START'">
			<view class="solution red" @click="popCancel" v-show="status == 'START'">
				取消订单
			</view>
		</view>
		<view class="btns"
			v-show="status == 'ACCEPT' || status == 'ACCEPT_CLOSING' || status == 'DOING' || status == 'DOING_CLOSING'">
			<view @click="enterService" v-if="status == 'ACCEPT'">
				<view class="solution" v-if="serviceProjectName === '农机租赁'">
					已取农机
				</view>
				<view class="solution" v-if="serviceProjectName === '设施租赁'">
					确认订单
				</view>
			</view>
			<view v-if="closeApply === null">
				<view class="solution red" @click="popCancel"
					style="border-color: #FF6E6E;color: #FF6E6E;">
					取消订单
				</view>
			</view>
			<template v-else>
				<template v-if="closeApply.status === 'QUASH'">
					<view class="solution red" @click="showComplain">
						订单投诉
					</view>
					<view class="solution red" @click="popCancel"
						style="border-color: #FF6E6E;color: #FF6E6E;">
						{{closeApply.personalFirst ? '' : '再次'}}取消订单
					</view>
					<view class="solution" v-show="complainApply && complainApply.reasonId" @click="lookComplainReason">
						投诉原因
					</view>
				</template>
				<template v-else-if="closeApply.status === 'TBC'">
					<template v-if="closeApply && closeApply.applyPersonType == 'SERVER_SIDE'">
						<view class="solution" @click="agree">
							同意
						</view>
						<view class="solution red"  @click="reject" style="border-color: #FF6E6E;color: #FF6E6E; ;">
							拒绝
						</view>
					</template>
					<template v-else-if="closeApply && closeApply.applyPersonType == 'ORDER_SIDE'">
						<view class="solution" @click="repealOrder">
							撤销取消订单
						</view>
					</template>
				</template>
				<template v-else-if="closeApply.status === 'REJECT'">
					<view class="solution red" @click="showComplain"
						v-show="!closeApply.personalFirst">
						订单投诉
					</view>
					<view class="solution red" @click="popCancel"
						style="border-color: #FF6E6E;color: #FF6E6E;">
						{{closeApply.personalFirst ? '' : '再次'}}取消订单
					</view>
					<view class="solution" v-show="complainApply && complainApply.reasonId" @click="lookComplainReason">
						投诉原因
					</view>
				</template>
				<view class="solution" v-show="closeApply && closeApply.reasonId" @click="lookCancelReason">
					取消原因
				</view>
			</template>
		</view>
		<view class="btns" v-if="status == 'ACCEPT_APPEAL' || status == 'DOING_APPEAL' || status == 'DONE_APPEAL'">
			<view class="solution" v-show="complainApply && complainApply.reasonId" @click="lookComplainReason">
				投诉原因
			</view>
			<view class="solution" @click="repealComplain"
				v-show="complainApply.complainant === 'ORDER_SIDE'">
				撤销投诉
			</view>
		</view>
		<view class="btns" v-if="status == 'DONE'">
			<view class="solution" @click="offlinePay">
				线下支付
			</view>
			<view class="solution red" @click="showComplain">
				订单投诉
			</view>
			<view class="solution" v-show="complainApply && complainApply.reasonId" @click="lookComplainReason">
				投诉原因
			</view>
			<!-- <view class="solution" @click="onlinePay">
				线上支付
			</view> -->
		</view>
		<view class="btns" v-if="status == 'PAID' || status == 'COMMENTED' || status == 'END'">
			<view class="solution" @click="appraise">
				{{evaluated ? '查看评价' : '订单评价'}}
			</view>
			<view class="solution red" @click="delOrder" style="border-color: #FF6E6E;color: #FF6E6E;">
				删除订单
			</view>
		</view>
		<view class="btns" v-if="status == 'CLOSE'">
			<view class="solution" v-show="closeApply && closeApply.reasonId" @click="lookCancelReason">
				取消原因
			</view>
			<view class="solution red" @click="delOrder" style="border-color: #FF6E6E;color: #FF6E6E;">
				删除订单
			</view>
		</view>
		<!-- operate -->
		<u-popup class="popUp" :show="popCancelFlag" :round="10" mode="bottom" width="100%" height="100%"
			:closeable="false" @close="popCancelFlag=false">
			<view class="popUpOperate">
				<view class="left" @click="popCancelFlag=false">
					取消
				</view>
				<view class="center">
					取消订单
				</view>
				<view class="right" @click="popConfirm">
					确认
				</view>
			</view>
			<view class="contents">
				<view class="radio">
					<u-radio-group
					    v-model="radiovalue1"
					    iconPlacement="right"
					     placement="column"
						 size="32"
					  >
					    <u-radio
					      :customStyle="{marginBottom: '8px'}"
					      v-for="(item, index) in radiolist1"
					      :key="item.id"
					      :label="item.name"
					      :name="item.id"
					    >
					    </u-radio>
					  </u-radio-group>
				</view>
				<view class="textarea" v-show="radiovalue1 !== null">
					<u--textarea type="textarea" v-model="popData.content" placeholder="请补充取消原因"
						style="height: 100%;width: 100%;padding: 10rpx;" height="200" count>
					</u--textarea>
				</view>
				<imageVideo @imageOrVideo="imageOrVideo"></imageVideo>
			</view>
		</u-popup>
		
		<u-popup class="popUp" :show="complainFlag" :round="10" mode="bottom" width="100%" height="100%"
			:closeable="false" @close="complainFlag=false">
			<view class="popUpOperate">
				<view class="left" @click="complainFlag=false">
					取消
				</view>
				<view class="center">
					投诉原因
				</view>
				<view class="right" @click="complainConfirm">
					确认
				</view>
			</view>
			<view class="contents">
				<view class="radio">
					<view class="title">价格有变动</view>
					<u--input class="input-box" v-model="popData.complaintAmount" type="number" placeholder='请输入变动后的价格'></u--input>
					<template v-if="['翻耕整地', '无人机打药', '机插秧', '作物收割', '作物播种'].includes(serviceProjectName)">
						<view class="title">服务亩数有变动</view>
						<u--input class="input-box" v-model="popData.complaintRate" type="number" placeholder='请输入变动后的亩数'></u--input>
					</template>
					<!-- <u-radio-group
					    v-model="radiovalue2"
					    iconPlacement="right"
					     placement="column"
						 size="32"
					  >
					    <u-radio
							:customStyle="{marginBottom: '8px'}"
							v-for="(item, index) in radiolist2"
							:key="item.id"
							:label="item.name"
							:name="item.id"
					    >
					    </u-radio>
					</u-radio-group> -->
				</view>
				<view class="title">其他</view>
				<view class="textarea">
					<u--textarea type="textarea" v-model="popData.complainContent" placeholder="点击输入投诉原因"
						style="height: 100%;width: 100%;padding: 10rpx;" height="200" count>
					</u--textarea>
				</view>
				<imageVideo @imageOrVideo="imageOrVideo"></imageVideo>
			</view>
		</u-popup>
		
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog cancelText="关闭" confirmText="同意" title="删除提示" content="确定删除此订单吗？" @confirm="delConfirm"
				@close="delClose"></uni-popup-dialog>
		</uni-popup>
		
		<uni-popup ref="confirmDialog" type="dialog">
			<uni-popup-dialog cancelText="未支付" confirmText="已支付" title="支付提示" content="是否已完成支付？" @confirm="payConfirm"
				@close="payClose"></uni-popup-dialog>
		</uni-popup>
		
		<u-popup class="popUp" :show="lookCancelFlag" :round="10" mode="bottom" width="100%" height="100%"
			:closeable="false" @close="lookCancelFlag=false">
			<view class="popUpOperate popUpOperate1">
				<view class="center">
					取消原因
				</view>
			</view>
			<view class="contents">
				<view class="lookCancel">
					<view class="reason" v-if="closeApply">
						{{closeApply.applyPersonType === 'ORDER_SIDE' ? '下单方取消' : '服务方取消'}}
					</view>
					<view class="reason" v-if="closeApply">
						{{closeApply.reasonName}}
					</view>
					<view class="reason" v-if="closeApply">
						备注：{{closeApply.reason}}
					</view>
					<view class="imgs" v-if="closeApply && closeApply.pictureList">
						<image :src="item" mode="widthFix" class="img" v-for="(item,index) in closeApply.pictureList" :key="index"></image>
					</view>
					<view class="vedio" v-if="closeApply && closeApply.vedio">
						<MyVideo :videoUrl="closeApply.vedio"
							style="width: 100%;min-width: 600rpx;height: 420rpx;" class="video"></MyVideo>
					</view>
				</view>
			</view>
		</u-popup>
		
		<u-popup class="popUp" :show="lookComplainFlag" :round="10" mode="bottom" width="100%" height="100%"
			:closeable="false" @close="lookComplainFlag=false">
			<view class="popUpOperate popUpOperate1">
				<view class="center">
					投诉原因
				</view>
			</view>
			<view class="contents">
				<view class="lookCancel">
					<view class="reason" v-if="complainApply">
						投诉人：{{complainApply.createUserName}}
					</view>
					<view class="reason" v-if="complainApply">
						{{complainApply.reasonName}}
					</view>
					<view class="reason" v-if="complainApply">
						备注：{{complainApply.remark}}
					</view>
					<view class="imgs" v-if="complainApply && complainApply.pictureList">
						<image :src="item" mode="widthFix" class="img" v-for="(item,index) in complainApply.pictureList" :key="index"></image>
					</view>
					<view class="vedio" v-if="complainApply && complainApply.vedio">
						<MyVideo :videoUrl="complainApply.vedio"
							style="width: 100%;min-width: 600rpx;height: 420rpx;" class="video"></MyVideo>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import API from '@/api/socialized-servce/farm-service/normalUser/myOrder/index.js'
	import API1 from '@/api/socialized-servce/farm-service/mechanist/my-order/index.js'
	import imageVideo from '../../components/image-video/index.vue'
	import MyVideo from '@/subPage1/components/myVideo/myVideo.vue'
	export default {
		data() {
			return {
				popCancelFlag: false,
				complainFlag: false,
				lookCancelFlag: false,
				lookComplainFlag: false,
				popData: {
					content: '',
					complainContent: '',
					completeContent: '',
					imgList: [],
					videoList: [],
					complaintRate: '', // 投诉服务亩数
					complaintAmount: '', // 投诉服务价格
				},
				radiovalue1: null,
				radiovalue2: null,
				radiolist1: [],
				radiolist2: []
			}
		},
		components: {
			imageVideo,
			MyVideo
		},
		created() {
			this.radiolist1 = uni.getStorageSync('radiolist1')
			this.radiolist2 = uni.getStorageSync('radiolist2')
		},
		props: {
			id: {
				type: Number,
				default: ''
			},
			status: {
				type: String,
				default: ''
			},
			orderId: {
				type: String,
				default: ''
			},
			evaluated: {
				type: Boolean,
				default: false
			},
			serviceProjectNo: {
				type: String,
				default: ''
			},
			closeApply: {
				type: Object,
				default: null
			},
			complainApply: {
				type: Object,
				default: null
			},
			serviceProjectName: {
				type: String,
				default: ''
			},
			orderRow: {
				type: Object,
				default: null
			},
		},
		methods: {
			popCancel() {
				this.popData.content = ''
				this.popCancelFlag = true
			},
			async popConfirm() {
				if(this.radiovalue1 === null) {
					uni.showToast({
						title: '请选择取消原因',
						icon: 'none'
					})
				} else {
					let {
						imgList,
						videoList,
						content
					} = this.popData
					let params = {
						orderNo: this.orderId,
						applyPersonType: 'ORDER_SIDE',
						reason: content,
						pictureList: imgList,
						vedio: '',
						reasonId: this.radiovalue1
					}
					if(videoList.length>0) {
						params.vedio = videoList[0]
					}
					let res = await API.applayCancelOrder(params)
					if (res.code === 200) {
						uni.$emit('updateOrder')
						uni.showToast({
							title: '操作成功',
							icon: 'success'
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
					this.popCancelFlag = false
				}
			},
			async repealOrder() {
				let params = {
					orderNo: this.orderId,
					applyPersonType: 'ORDER_SIDE',
					closeResult: false,
				}
				let res = await API.confirmCancel(params)
				if (res.code === 200) {
					await uni.$emit('updateOrder')
					uni.showToast({
						title: '操作成功',
						icon: 'success'
					})
				}
				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
			},
			showComplain() {
				this.popData.complainContent = ''
				this.complainFlag = true
			},
			async complainConfirm() {
				if(!(this.popData.complaintAmount || this.popData.complaintRate || this.popData.complainContent)) {
					let msg = '请至少输入一个投诉原因(变动后价格/其他)'
					if (['翻耕整地', '无人机打药', '机插秧', '作物收割', '作物播种'].includes(this.serviceProjectName)) {
						msg = '请至少输入一个投诉原因(变动后价格/亩数/其他)'
					}
					uni.showToast({
						title: msg,
						icon: 'none'
					})
				} else {
					let {
						complainContent,
						imgList,
						videoList,
						complaintRate, // 投诉服务亩数
						complaintAmount, // 投诉服务价格
					} = this.popData
					let params = {
						orderNo: this.orderId,
						complainant: 'ORDER_SIDE',
						remark: complainContent,
						pictureList: imgList,
						vedio: '',
						properties: {}
						// reasonId: this.radiovalue2
					}
					let row1 = this.orderRow.properties.find(el => { return el.expression == 'complaintRate' })
					let row2 = this.orderRow.properties.find(el => { return el.expression == 'complaintAmount' })
					if(this.serviceProjectName=="秸秆离田"){
						row2 && (params.properties[row2.propertyCode] = complaintAmount)
					}else{
						row1 && (params.properties[row1.propertyCode] = complaintRate)
						row2 && (params.properties[row2.propertyCode] = complaintAmount)
					}
				
					if(videoList.length>0) {
						params.vedio = videoList[0]
					}
					console.log(params)
					let res = await API.orderComplaint(params)
					if (res.code === 200) {
						uni.showToast({
							title: '操作成功',
							icon: 'success'
						})
						uni.$emit('updateOrder')
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
					this.complainFlag = false
				}
			},
			async repealComplain() {
				let res = await API.repealOrderComplaint(this.orderId)
				if (res.code === 200) {
					await uni.$emit('updateOrder')
					uni.showToast({
						title: '操作成功',
						icon: 'success'
					})
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			},
			async agree() {
				let params = {
					orderNo: this.orderId,
					applyPersonType: 'ORDER_SIDE',
					closeResult: true,
				}
				let res = await API.confirmCancel(params)
				if (res.code === 200) {
					uni.$emit('updateOrder')
					uni.showToast({
						title: '操作成功',
						icon: 'success'
					})
				}
				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
			},
			async reject() {
				let params = {
					orderNo: this.orderId,
					applyPersonType: 'ORDER_SIDE',
					closeResult: false,
				}
				let res = await API.confirmCancel(params)
				if (res.code === 200) {
					uni.$emit('updateOrder')
					uni.showToast({
						title: '操作成功',
						icon: 'success'
					})
				}
				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
			},
			delOrder() {
				this.$refs.alertDialog.open()
			},
			delClose() {
				this.$refs.alertDialog.close()
			},
			async delConfirm() {
				let res = await API.delOrder(this.orderId)
				if (res.code === 200) {
					uni.$emit('updateOrder')
					uni.showToast({
						title: '操作成功',
						icon: 'success'
					})
				} else {
					uni.showToast({
						title: '操作失败',
						icon: 'none'
					})
				}
			},
			appraise() {
				uni.navigateTo({
					url: `/subPage1/socialized-service/farm-service/normalUser/appraise-order/appraise-order?orderId=${this.orderId}&evaluated=${this.evaluated}&serviceProjectNo=${this.serviceProjectNo}`
				})
			},
			offlinePay() {
				this.$refs.confirmDialog.open()
			},
			onlinePay() {
				console.log('线上支付');
			},
			async payConfirm() {
				let params = {
					orderId: this.orderId
				}
				let res = await API.completePay(params)
				if (res.code === 200) {
					uni.$emit('updateOrder')
					uni.showToast({
						title: '支付成功',
						icon: 'success'
					})
				} else {
					uni.showToast({
						title: '支付失败',
						icon: 'none'
					})
				}
			},
			payClose() {
				this.$refs.confirmDialog.open()
			},
			imageOrVideo(e) {
				this.popData.imgList = []
				this.popData.videoList = []
				e.imgList.forEach(el => {
					this.popData.imgList.push(el.imgUrl)
				})
				e.videoList.forEach(el => {
					this.popData.videoList.push(el.videoUrl)
				})
			},
			async enterService() {
				let params = {
					orderNo: this.orderId
				}
				let res = await API1.startService(params)
				if (res.code === 200) {
					uni.$emit('updateOrder')
					uni.showToast({
						title: '操作成功',
						icon: 'success'
					})
				} else {
					uni.showToast({
						title: '操作失败',
						icon: 'none'
					})
				}
			},
			lookCancelReason() {
				this.lookCancelFlag = true
			},
			lookComplainReason() {
				this.lookComplainFlag = true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.btns {
		border-top: 1px solid #EFEFEF;
		padding-top: 10rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
	}

	.solution {
		padding: 0 10rpx;
		margin-right: 10rpx;
		margin-bottom: 10rpx;
		height: 58rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #888888;
		text-align: center;
		line-height: 58rpx;
		box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.16);
		border-radius: 15px 15px 15px 15px;
		border: 2px solid #888888;
		
		&.red {
			color: #fd8f8f;
			border: 2px solid #fd8f8f;
		}
	}

	.unsolution {
		background: linear-gradient(135deg, #FF6E6E 0%, #F73737 100%);
	}

	.popUpOperate {
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100rpx;
		padding: 0 20rpx;
		border-bottom: 1px solid #ccc;

		.left,
		.right {
			color: #0079fe;
		}

		.center {
			font-weight: 700;
		}
	}
	
	.popUpOperate1 {
		justify-content: center;
	}
	
	.contents {
		padding: 0 20rpx;
		margin-top: 20rpx;
		
		.title {
			font-size: 28rpx;
			margin-bottom: 6rpx;
		}
		
		.input-box {
			margin-bottom: 6rpx;
		}

		.textarea {
			height: 260rpx;
			width: 100%;
			background-color: #fff;
			
			/deep/ .u-textarea {
				box-sizing: border-box;
				width: 100%!important;
				display: inline-block!important;
			}
		}

		.upload {
			height: 96rpx;
			display: flex;
			align-items: center;

			.text {
				font-size: 24rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #2265FB;
				text-decoration: underline;
			}
		}

		.lookCancel {
			font-size: 32rpx;
			.reason {
				margin-bottom: 10rpx;
			}
			.imgs {
				display: flex;
				width: 100%;
			
				.img {
					margin-left: 20rpx;
					flex: 1;
					max-width: 50%;
					
					&:first-child {
						margin-left: 0;
					}
				}
				
				margin-bottom: 10rpx;
			}
		}
	}

	/deep/ .uni-popup {
		z-index: 99999 !important;
	}

	/deep/ .u-radio__text {
		font-size: 28rpx!important;
	}
	/deep/ .u-icon__icon {
		font-size: 28rpx!important;
	}
</style>